﻿<template>
  <el-select v-loading="isLoading"
               v-model="id"
               :clearable="clearable"
               filterable
             :readonly="readonly"
             :multiple="multiple"
              :disabled="disabled"
             :size="size"
               @change="updateValue">
    <el-option v-for="item in dataList" :key="item.id" :value="item.id" :label="item.name"></el-option>
  </el-select>
</template>
<script>
function noop() {}
export default {
  name: "MetaSelect",
  props: {
    value:{},
    //枚举id
    type: {},
    placeholder:{},
    //是否禁用
    disabled:{
      type:Boolean,
      default:false
    },
    size:{
      type:String,
      default:'small'
    },
    //是否可多选
    multiple:{
      type:Boolean,
      default:false,
    },
    //是否只读
    readonly:{
      type:Boolean,
      default:false,
    },
    //数据加载后展示前处理函数
    beforeDisplayList:{
      type:Function,
      default:null
    },
    //默认选中项
    defaultSelect:{
      type:String,
      default:null,
    },
    //是否带删除按钮
    clearable:{
      type:Boolean,
      default:true,
    }
  },
  // //数据id属性
  // valueKey:{
  //   type:String,
  //   default:'id'
  // },
  model: {
    prop: 'value',
    event: 'change'
  },
    data(){
      return {
          dataList:[],
          isLoading:true,
      }
    },
  computed:{
    id:{
      get(){
        return this.value;
      },
      set(value){
        // this.$emit("change",value);
      }
    }
  },
  mounted(){
    this.loadDataList();
  },
  methods: {
    updateValue(val){
      this.$emit('input', val)
      this.$emit('change', val)
    },
    //加载数据列表
    loadDataList: function () {
      this.isLoading = true;

      let url = "/meta/type/"+this.type;
      this.addAjaxCachePath(url)

      // if (this.metaCache[url] != undefined) {
      //   this.dataList = this.metaCache[url];
      //   this.isLoading = false;
      //   console.log("type:" ,this.type,this.metaCache[url])
      //   return ;
      // }

      this.$get(url, {}, (response) => {
        let list = response.data
        if (this.beforeDisplayList) {
          //用于处理数据渲染前逻辑
          list = this.beforeDisplayList(list)
        }
        this.dataList = list;
        this.updateDefaultSelect()
        //  this.addMetaCache(url, response.data);
        this.$emit("load",list,this);
      },()=>{
        this.isLoading = false;
      })
    },
    //获取id、名称映射
    getNameMap() {
      let map = {};
      for(let item of this.dataList) {
        map[item.id] = item.name;
      }
      return map;
    },
    //未设置值时选中默认值
    updateDefaultSelect() {
      if(this.value==null||this.value==undefined||this.value=='') {
        //默认值选中
        if(this.defaultSelect=='first'&&this.dataList&&this.dataList.length>0) {
          this.value = this.dataList[0]['id'];
          this.updateValue(this.value);
        }
      }
    },
    //获取id、数据映射
    getDataMap() {
      let map = {};
      for(let item of this.dataList) {
        map[item.id] = item;
      }
      return map;
    }
  }
};
</script>
